<template>

  <div>

    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="searchForm.roleName" placeholder="角色名称" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="submitSearchForm">查询</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="saveRole(0)">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="roleId" label="ID" width="180" />
      <el-table-column prop="roleName" label="角色名称" width="180" />
      <el-table-column prop="deptName" label="部门" width="180" />
      <el-table-column prop="remark" label="备注" width="180" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="saveRole(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="deleteByRids(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--    @@@@@@@@@@@@@@@@@@@@角色操作-->
    <el-dialog
      title="提示"
      :visible.sync="editDialogVisible"
      width="30%"
    >

      <el-form ref="form" :model="roleForm" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="roleForm.roleName" />
        </el-form-item>
        <el-form-item label="所属部门">
          <el-button type="text" @click="selectDept">请点击选择部门</el-button>
          <el-input v-model="roleForm.deptId" style="width: 300px" readonly="readonly" v-text="parentName" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="roleForm.remark" />
        </el-form-item>
        <h3 align="left">功能权限</h3>
        <el-tree
          ref="tree"
          :data="menus"
          show-checkbox
          node-key="menuId"
          :default-checked-keys="treeMids"
          :props="menuProps"
        />
        <el-form-item>
          <el-button type="primary" @click="submitRoleFomr()">立即创建</el-button>
          <el-button @click="editDialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--    999999999999999999999999添加对话框里选择部门999999999999999999999999999-->
    <el-dialog
      title="提示"
      :visible.sync="editDialog"
      width="30%"
      center
    >
      <el-tree :data="dept" :props="defaultProps" @node-click="handleNodeClick" />
      <span slot="footer" class="dialog-footer">
        <!--        <el-button @click="editDialog = false">取 消</el-button>-->
        <!--        <el-button type="primary" @click="editDialog = false">确 定</el-button>-->
      </span>
    </el-dialog>

  </div>

</template>

<script>
export default {
  name: 'SysRole',
  data() {
    return {
      editDialogVisible: false,
      searchForm: {},
      tableData: [],
      treeMids: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      menus: [],
      parentName: '',
      roleForm: {},
      dept: [],
      editDialog: false,
      defaultProps: {
        children: 'sysDeptList',
        label: 'name'
      },
      menuProps: {
        children: 'sysMenuList',
        label: 'name'
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    getRole(roleId) {
      this.axios.get('http://localhost:9999/system-management/sys/role/info', {
        params: {
          roleId: roleId
        }
      }).then((res) => {
        this.treeMids = res.data.obj.menuIdList
      })
    },
    saveRole(row) {
      this.roleForm = { }
      this.parentName = ''
      this.initDeptData()
      this.initMenuData()
      if (row) {
        this.editDialogVisible = true
        this.roleForm.roleName = row.roleName
        this.roleForm.remark = row.remark
        this.roleForm.roleId = row.roleId
        this.parentName = row.deptName
        this.getRole(row.roleId)
      }
      this.editDialogVisible = true
    },
    submitSearchForm() {
      this.pageNum = 1
      this.initData()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.initData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNum = val
      this.initData()
    },
    initData() {
      this.axios.get('http://localhost:9999/system-management/sys/role/list', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          roleName: this.searchForm.roleName
        }
      }).then((res) => {
        this.tableData = res.data.obj.list
        this.total = res.data.obj.total
      })
    },
    deleteByRids(row) {
      if (confirm('确定删除?')) {
        this.axios.get('http://localhost:9999/system-management/sys/role/delete', {
          params: {
            roleId: row.roleId
          }
        }).then((res) => {
          if (res.data.code === '200') {
            alert('删除成功')
            this.initData()
          } else {
            alert('删除失败')
          }
        })
      }
    },
    submitRoleFomr() {
      if (this.roleForm.roleId != null) {
        const mids = this.$refs.tree.getCheckedKeys()
        this.roleForm.menuIdList = mids
        this.axios.post('http://localhost:9999/system-management/sys/role/save', this.roleForm).then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.data.code == '200') {
            alert('修改成功')
            this.editDialogVisible = false
            this.initData()
          } else {
            alert('修改失败')
          }
        })
      } else {
        const mids = this.$refs.tree.getCheckedKeys()
        this.roleForm.menuIdList = mids
        this.axios.post('http://localhost:9999/system-management/sys/role/save', this.roleForm).then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.data.code == '200') {
            alert('添加成功')
            this.editDialogVisible = false
            this.initData()
          } else {
            alert('添加失败')
          }
        })
      }
    },
    initMenuData() {
      this.axios.get('http://localhost:9999/system-management/sysMenu/parentList').then((res) => {
        console.log(res.data)
        this.menus = res.data.obj
      })
    },
    handleNodeClick(data) {
      this.parentName = data.name
      this.roleForm.deptId = data.deptId
      this.roleForm.deptName = data.deptName
      this.editDialog = false
    },
    selectDept() {
      this.editDialog = true
    },
    initDeptData() {
      this.axios.get('http://localhost:9999/system-management/sysDept/list').then((res) => {
        console.log(res.data)
        this.dept = res.data.obj
      })
    }
  }
}
</script>

<style scoped>

</style>
